<template>
	<view class="page" :style="{'height':h+'px','padding-top':mt+'px'}">
		<c-nav-bar title="租赁车辆"></c-nav-bar>
		<view class="lunbo">
			<u-swiper v-if="company&&company.corporatePhotoList" :list="company.corporatePhotoList" @change="e => current = e.current"
				:autoplay="false" :circular="true" indicatorStyle="right: 20px;bottom:20px;color:#fff;background:rgba(17,17,17,.5);padding:4rpx 18rpx;box-sizing:border-box;border-radius:18rpx;" height="420rpx">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ current + 1 }}/{{ company.corporatePhotoList.length }}</text>
				</view>
			</u-swiper>
		</view>
		<view class="info">
			<view class="i_name">{{company.corporateName}}</view>
			<view class="i_pre">
				<view class="ip_title">联系人</view>
				<view class="ip_text">{{company.rentalName}}</view>
			</view>
			<view class="i_pre">
				<view class="ip_title">手机号码</view>
				<view class="ip_text">{{company.rentalPhone}}</view>
			</view>
			<view class="i_pre">
				<view class="ip_title">营业时间</view>
				<view class="ip_text">{{company.businessHours}}</view>
			</view>
			<view class="i_addr">
				<view class="ia_left">
					<image src="https://i.ringzle.com/file/20231128/14ce31c27e374086aaf3d5f67c11db7b.png"></image>
					<text>{{company.position}}</text>
				</view>
				<view class="ia_right" @tap="toNavigation(company.latitude,company.longitude)">
					<image src="https://i.ringzle.com/file/20231129/8cbddbe961404f048d2c35a3d81b4c3e.png"></image>
					<text>导航</text>
				</view>
			</view>
		</view>
		<view class="lines" v-if="type==3&&lineList.length>0">
			<view class="l_title">包车路线</view>
			<view v-for="(line,index) in lineList" :key="index" class="l_item">
				<view class="lt_l">{{line.routeName}}：</view>
				<view class="lt_r">{{line.routeDetails}}</view>
			</view>
		</view>
		<view class="cars" v-if="type==1||type==3">
			<view class="c_taps" v-if="type==1">
				<view class="ctb_pre" :class="tidx===0?'active':''" @tap="changeTap(0)">小轿车：{{carNum}}辆</view>
				<view class="ctb_pre" :class="tidx===1?'active':''" @tap="changeTap(1)">中型客车：{{busNum}}辆</view>
			</view>
			<view class="c_taps c_taps_bc" v-if="type==3">
				<u-scroll-list :indicator="false">
					<view class="ctb_pre" :class="tidx===0?'active':''" @tap="changeTapBc(0)">小型大巴车：{{carNum}}辆</view>
					<view class="ctb_pre" :class="tidx===1?'active':''" @tap="changeTapBc(1)">中型大巴车：{{busNum}}辆</view>
					<view class="ctb_pre" :class="tidx===2?'active':''" @tap="changeTapBc(2)">上汽大通G50：{{sqdtNum}}辆</view>
				</u-scroll-list>
			</view>
			<view v-for="(car,index) in list" :key="index" class="b_item">
				<image :src="car.pic"></image>
				<view class="bc_info">
					<view class="bci_top">
						<view class="bcit_name">{{car.name}}</view>
					</view>
					<view class="bci_pzs">
						<view>{{car.carPower}}</view>
						<view>{{categaryCfg[car.categary]}}</view>
						<view>{{driversTypeCfg[car.driversType]}}</view>
						<view>{{car.seat}}座</view>
					</view>
					<view class="bci_price">
						<text>￥{{car.price}}</text>
						<span>/天</span>
					</view>
					<view class="bci_tips">
						<image v-if="car.insureType==0" src="https://i.ringzle.com/file/20231128/44923c2a524846c2b37bcc02dac55d38.png"></image>
						<view class="bcit_box" v-if="car.takeDeliverType===0">上门取送</view>
						<view class="bcit_box" v-if="car.depositType>=0">{{depositTypeCfg[car.depositType]}}</view>
						<view class="bcit_box bb_dcyx" v-if="car.reverseImageType===0">倒车影像</view>
					</view>
				</view>
			</view>
		</view>
		<view class="electrocars" v-if="type==2">
			<view class="e_title">本店全部车辆（{{electrocarNum}}）</view>
			<view class="e_box b_item" v-for="(item,index) in electrocarList" :key="index">
				<image :src="item.pic"></image>
				<view class="bc_info">
					<view class="bci_top">
						<view class="bcit_name">{{item.name}}</view>
					</view>
					<view class="bci_pzs">
						<view>{{item.electromobilePower}}</view>
						<view>{{item.endurance}} km</view>
					</view>
					<view class="bci_price">
						<text>￥{{item.price}}</text>
						<span>/天</span>
					</view>
				</view>
			</view>
		</view>
		<view class="licence_info" @tap="toPage">
			<text>工商执照信息</text>
			<image src="@/static/index/steamerTicket/icon_yjt.png"></image>
		</view>
		<view class="operation">
			<view class="o_left">
				<view @tap="showPhoneModel(1)">
					<image src="https://i.ringzle.com/file/20231110/9802dae34d364fbeaa590a33f42553c3.png"></image>
					<text>监督电话</text>
				</view>
			</view>
			<view class="o_right" @tap="showPhoneModel(2)">联系商家</view>
		</view>
		<u-popup :show="showPhone" @close="showPhone=false">
			<view class="p_phone">
				<view class="pp_title">{{phoneType==1?'监督电话':'联系商家'}}</view>
				<view class="pp_tel" @tap="callPhone">{{phoneNumber}}</view>				
				<view class="pp_qx" @tap="showPhone=false">取消</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				h:uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				companyId:'',
				company:null,
				current:0,
				showPhone:false,
				phoneNumber:'',
				phoneType:1,
				tidx:0,
				list:[],
				carList:[],
				busList:[],
				sqdtList:[],
				categaryCfg:{0:'自动挡',1:'手动挡'},
				// driversTypeCfg:{1:'C1驾照',2:'B2驾照',3:'A2驾照',4:'A1驾照'},
				driversTypeCfg: {
					1: 'C1驾照',
					2: 'C2驾照',
					3: 'B2驾照',
					4: 'A1驾照',
					5: 'A2驾照'
				},
				depositTypeCfg:{0:'芝麻免押金',1:'押金￥500',2:'押金￥1000',3:'押金￥1500',4:'押金￥2000'},
				shopVehicles:0,
				carNum:0,
				busNum:0,
				sqdtNum:0,
				type:1,
				electrocarNum:0,
				electrocarList:[],
				lineList:[]
			}
		},
		onLoad(option) {
			if(option.companyId){
				if(option.type) this.type = option.type;
				this.companyId = option.companyId;
				this.getCompanyInfo();
				if(this.type==1){
					this.getCarListType(0);
					this.getCarListType(1);
				}else if(this.type==2){
					this.getElectrocarList();
				}else if(this.type==3){
					this.getLineList(option.carType||'',option.name||'',option.numberplate||'');
					this.getBcCarListType(0);
					this.getBcCarListType(1);
					this.getBcCarListType(2);
				}
			}
		},
		methods: {
			getCompanyInfo(){
				this.$api.get('/travel/travel/rentalcarcar/companyId',{companyId:this.companyId}).then(res=>{
					if(res.data.code===0){
						this.company = res.data.data;
					}else this.$showModal(res.data.msg);
				})
			},
			getCarListType(shopVehicles){
				this.$api.get('/travel/travel/rentalcarcar/idAndshopVehicles',{
					rentalcarCompanyId:this.companyId,
					shopVehicles
				}).then(res=>{
					if(res.data.code===0){
						if(shopVehicles===0){
							this.carList = res.data.data;
							this.carNum = this.carList.length;
						} 
						if(shopVehicles===1){
							this.busList = res.data.data;
							this.busNum = this.busList.length;
						} 
						if(this.tidx===0) this.list = this.carList;
						if(this.tidx===1) this.list = this.busList;
					}else this.$showModal(res.data.msg);
				})
			},
			getElectrocarList(){
				this.$api.get('/travel/travel/rentalcarelectromobile/corporateId',{rentalcarCompanyId:this.companyId}).then(res=>{
					if(res.data.code===0){
						this.electrocarList = res.data.data;
						this.electrocarNum = this.electrocarList.length;
					}else this.$showModal(res.data.msg);
				})
			},
			getLineList(carType,name,numberplate){
				this.$api.get('/travel/travel/rentalcarengagecar/query',{
					carType,name,numberplate
				}).then(res=>{
					if(res.data.code===0){
						this.lineList = res.data.data;
						this.lineList.forEach(l=>{
							let rd = l.spotNameList.reduce((cur,pre)=>cur+'+'+pre,'').substring(1);
							l.routeDetails = rd;
						})
					}else this.$showModal(res.data.msg);
				})
			},
			getBcCarListType(shopVehicles){
				this.$api.get('/travel/travel/rentalcarengagecar/rentalcarCompanyId',{
					rentalcarCompanyId:this.companyId,
					shopVehicles
				}).then(res=>{
					if(res.data.code===0){
						if(shopVehicles===0){
							this.carList = res.data.data;
							this.carNum = this.carList.length;
						} 
						if(shopVehicles===1){
							this.busList = res.data.data;
							this.busNum = this.busList.length;
						} 
						if(shopVehicles===2){
							this.sqdtList = res.data.data;
							this.sqdtNum = this.sqdtList.length;
						} 
						if(this.tidx===0) this.list = this.carList;
						if(this.tidx===1) this.list = this.busList;
						if(this.tidx===2) this.list = this.sqdtList;
					}else this.$showModal(res.data.msg);
				})
			},
			changeTap(type){
				this.tidx = type;
				this.shopVehicles = type;
				this.getCarListType(this.shopVehicles);
			},
			changeTapBc(type){
				this.tidx = type;
				this.shopVehicles = type;
				this.getBcCarListType(this.shopVehicles);
			},
			toNavigation(latitude,longitude){
				uni.openLocation({
					latitude,
					longitude,
					name:this.company.corporateName||'',
					address:this.company.position||''
				})
			},
			toPage(){
				uni.navigateTo({
					url:'/pagesIndex/rentalCar/businessLicenseInfo?businessLicenseList='+encodeURIComponent(JSON.stringify(this.company.businessLicenseList))
				})
			},
			showPhoneModel(type){
				this.showPhone = true;
				this.phoneType = type;
				this.phoneNumber = type==1?'0580-5596306':this.company.rentalPhone;
			},
			callPhone(){
				if(!this.phoneNumber) return this.$showToast('联系方式暂无')
				uni.makePhoneCall({
					phoneNumber:this.phoneNumber
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		background: #F5F8FA;
		overflow-y: auto;
		padding-bottom: 260rpx;
		box-sizing: border-box;
		
		.lunbo{
			width: 100%;
			height: 420rpx;
		}
		
		.info{
			width: 100%;
			padding: 40rpx 24rpx 28rpx;
			box-sizing: border-box;
			border-radius: 24rpx 24rpx 0 0;
			margin-top: -20rpx;
			position: relative;
			background: #fff;
			.i_name{
				font-size: 36rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				color: #111111;
			}
			.i_pre{
				margin-top: 36rpx;
				display: flex;
				align-items: center;
				.ip_title{
					width: 144rpx;
					font-size: 28rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}
				.ip_text{
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}
			.i_addr{
				margin-top: 6rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.ia_left{
					display: flex;
					align-items: center;
					image{
						width: 24rpx;
						height: 24rpx;
					}
					text{
						font-size: 26rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #879099;
						margin-left: 10rpx;
					}
				}
				.ia_right{
					width: 142rpx;
					height: 64rpx;
					background: #007A69;
					border-radius: 36rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					image{
						width: 32rpx;
						height: 32rpx;
					}
					text{
						font-size: 24rpx;
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						color: #FFFFFF;
						margin-left: 6rpx;
					}
				}
			}
		}
		
		.lines{
			width: 100%;
			padding: 36rpx 24rpx 40rpx;
			box-sizing: border-box;
			background: #fff;
			margin-top: 20rpx;
			.l_title{
				font-size: 36rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				color: #111111;
				margin-bottom: 16rpx;
			}
			.l_item{
				margin-top: 10rpx;
				width: 100%;
				padding: 17rpx 24rpx 19rpx;
				box-sizing: border-box;
				background: #F5F8FA;
				border-radius: 16rpx;
				display: flex;
				.lt_l{
					font-size: 28rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					color: #1C1E41;
					min-width: 140rpx;
				}
				.lt_r{
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #35465B;
					line-height: 42rpx;
				}
			}
		}
		
		.cars{
			width: 100%;
			padding: 36rpx 24rpx 30rpx;
			box-sizing: border-box;
			background: #fff;
			margin-top: 20rpx;
			.c_taps{
				width: 100%;
				height: 72rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 16rpx;
				.ctb_pre{
					width: calc(50% - 15rpx);
					height: 70rpx;
					border-radius: 16rpx;
					border: 1rpx solid #CCCCCC;
					line-height: 70rpx;
					text-align: center;
					font-size: 30rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #111111;
					&.active{
						background: #007A69;
						color: #FFFFFF;
					}
				}
				&.c_taps_bc{
					display: flex;
					align-items: center;
					overflow-x: auto;
					padding: 3px 0;
					margin-bottom: 0;
					.ctb_pre{
						width: 306rpx;
						margin-right: 30rpx;
						&:last-child{
							margin-right: 0;
						}
					}
				}
			}
		}
		
		.b_item{
			width: 100%;
			padding: 24rpx 24rpx 8rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.08);
			border-radius: 16rpx;
			display: flex;
			margin-top: 20rpx;
			&>image{
				width: 162rpx;
				height: 162rpx;
			}
			.bc_info{
				width: calc(100% - 162rpx);
				padding-left: 24rpx;
				box-sizing: border-box;
				.bci_top{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.bcit_name{
						font-size: 32rpx;
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						color: #333333;
					}
					.bcit_bj{
						display: flex;
						align-items: center;
						text{
							font-size: 24rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #5A607C;
						}
						image{
							width: 24rpx;
							height: 24rpx;
						}
					}
				}
				.bci_pzs{
					margin-top: 24rpx;
					display: flex;
					align-items: center;
					&>view{
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #35465B;
						padding: 0 10rpx;
						position: relative;
						&:first-child{
							padding-left: 0;
						}
						&::after{
							content: "";
							width: 1rpx;
							height: 80%;
							background: #999999;
							position: absolute;
							right: 0;
							top: 10%;
						}
						&:last-child::after{
							width: 0;
						}
					}
				}
				.bci_price{
					margin-top: 30rpx;
					text{
						font-size: 40rpx;
						font-family: DINAlternate, DINAlternate;
						font-weight: bold;
						color: #FD3939;
					}
					span{
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #FF4141;
					}
				}
				.bci_tips{
					margin-top: 26rpx;
					overflow: hidden;
					&>image{
						width: 112rpx;
						height: 32rpx;
						margin-right: 10rpx;
						float: left;
					}
					.bcit_box{
						height: 32rpx;
						padding: 0 8rpx;
						border-radius: 4rpx;
						border: 1rpx solid #DCC7AB;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 20rpx;
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						color: #C9A771;
						float: left;
						margin-right: 9rpx;
						margin-bottom: 16rpx;
						&.bb_dcyx{
							margin-right: 0;
						}
					}
				}
			}
		}
		
		.electrocars{
			width: 100%;
			padding: 36rpx 24rpx 40rpx;
			box-sizing: border-box;
			background: #fff;
			margin-top: 20rpx;
			.e_title{
				font-size: 36rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				color: #111111;
				margin-bottom: 8rpx;
			}
			.e_box{
				margin-top: 24rpx;
				padding: 24rpx;
			}
		}
		
		.licence_info{
			width: 100%;
			padding: 31rpx 24rpx;
			box-sizing: border-box;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: fixed;
			left: 0;
			bottom: 120rpx;
			border-top: 20rpx solid #F5F8FA;
			border-bottom: 20rpx solid #F5F8FA;
			text{
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #111111;
			}
			image{
				width: 30rpx;
				height: 30rpx;
			}
		}
		
		.operation{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 16rpx 24rpx 32rpx 48rpx;
			width: 100%;
			box-sizing: border-box;
			background: #FFFFFF;
			box-shadow: 0rpx -1rpx 8rpx 0rpx rgba(0,0,0,0.06);
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 9;
			.o_left{
				width: calc(100% - 510rpx);
				&>view{
					display: flex;
					flex-direction: column;
					align-items: center;
					image{
						width: 32rpx;
						height: 34rpx;
					}
					text{
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						margin-top: 13rpx;
					}
				}
			}
			.o_right{
				width: 510rpx;
				height: 80rpx;
				background: #007A69;
				border-radius: 40rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #FFFFFF;
				letter-spacing: 2rpx;
			}
		}
	
		.p_phone{
			&>view{
				text-align: center;
				width: 100%;
				&.pp_title{
					padding: 30rpx 0;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
				&.pp_tel{
					border-top: 1rpx solid rgba(112, 112, 112, .1);
					padding: 28rpx 0 33rpx;
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #007A69;
				}
				&.pp_qx{
					padding: 31rpx 0 99rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #111111;
					border-top: 20rpx solid #F5F7F8;
				}
			}
		}
		
		/deep/.u-popup__content{
			border-radius: 32rpx 32rpx 0 0;
		}
		/deep/.u-scroll-list{
			padding-bottom: 0;
		}
	}
</style>